<template>
  <a-dropdown>
    <span class="dropdown">
      {{ value }}
      <DownOutlined></DownOutlined>
      <i></i>
      <i></i>
      <i></i>
      <i></i>
    </span>
    <template #overlay>
      <a-menu>
        <a-menu-item v-for="item of options" :key="item.value">
          <a href="javascript:" @click="emit('update:value', item.value)">{{ item.label }}</a>
        </a-menu-item>
      </a-menu>
    </template>
  </a-dropdown>
</template>

<script setup lang="ts">
import { DownOutlined } from '@ant-design/icons-vue'
import { toRefs } from 'vue'

const props = defineProps({
  value: {
    type: String,
    default: ''
  },
  options: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:value'])

const { value, options } = toRefs(props)
</script>

<style scoped>
.dropdown {
  position: relative;
  padding: 8px 16px;
  background: rgba(43, 103, 144, 0.32);
  border: 1px solid rgb(107, 165, 204, 0.63);
  border-right: none;
  border-left: none;
  font-size: 22px;
  color: #fff;
  font-weight: normal;
}
.dropdown i {
  position: absolute;
  width: 4px;
  height: 4px;
  border: 1px solid rgb(107, 165, 204, 0.63);
}

.dropdown i:nth-of-type(1) {
  top: 0;
  left: 0;
}
.dropdown i:nth-of-type(2) {
  top: 0;
  right: 0;
}
.dropdown i:nth-of-type(3) {
  bottom: 0;
  left: 0;
}
.dropdown i:nth-of-type(4) {
  bottom: 0;
  right: 0;
}
</style>
